import React from 'react'
import { Layout, Menu } from 'antd'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import styles from '../../styles/Home.module.css'
import back from '../../images/back.png'

const Home = () => {
  let path = useLocation().pathname
  let Navigate = useNavigate()
  const { Header, Content, Footer } = Layout
  const navs = [
    { name: '普通用户管理', id: 1, path: '/home/normal' },
    { name: '交管用户管理', id: 2, path: '/home/traffic' },
  ]
  return (
    <div className={styles.container}>
      <Layout className="layout">
        <Header>
          <div className={styles.logo}>光谷智慧交通用户管理系统</div>
          <Menu
            theme="dark"
            mode="horizontal"
            selectedKeys={[path]}
            onClick={({ key }) => Navigate(key, { path: path })}
            items={navs.map((item) => {
              const key = item.path
              const name = item.name
              return {
                key,
                label: name,
              }
            })}
          />
          <a href="http://127.0.0.1:5173/#/home" className={styles.back}>
            <img src={back} alt="" style={{width:40,height:40}}/>
          </a>
        </Header>
        <Content
          style={{
            padding: '0 50px',
          }}
        >
          <div className="site-layout-content">
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Guangu smart transpotation ©2022 Design by Tong & Wang & Li & Guo
        </Footer>
      </Layout>
    </div>
  )
}

export default Home
